<template>
    
    <div class="login-box">
        <el-row class="login-box-div">
            <el-col :span="16" class="login-box-left">
                <div>
                    <img src="../../assets/bg.jpg" class="logo vue" alt="Vue logo" style="width: 100%; height: 100%;"/>
                </div>
            </el-col>
            <el-col :span="8" class="login-box-right">
                
                <div>

                    <el-form ref="loginFormRef" style="max-width: 600px" label-width="auto" class="loginForm">

                        <h1>后台登录</h1>
                        <el-form-item label="账号">
                            <el-input v-model="data.formData.userName" autocomplete="off" clearable/>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="data.formData.password" type="password" autocomplete="off"  show-password/>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="sub-btn" type="primary" @click="submit()" @keydown.enter="keydown()">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>

                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const data = reactive({
    formData: {
        userName: '',
        password: ''
    }
})

const submit = async()=>  {
    // 放入路由信息
    ElMessage({
        message: '用户登录成功.',
        type: 'success',
    })
    // getUserInfo(res.data.token)
    router.push({name: 'dashboard'})

}

const keydown = (e) => {
    if(e.keyCode == 13 || e.keyCode == 100) {
        submit()
    }
}

</script>

<style lang="scss" scoped>
.login-box {
    width: 100%;
    height: 100vh;
    background-color: #fafafa;
    .el-row {
        height: 100vh;
        .login-box-left {
            display: flex; 
            align-items: center; 
            justify-content: center;
        }
        .login-box-right {
            display: flex; 
            align-items: center;
            justify-content: center;
            .loginForm {
                width: 400px;
                padding: 20px;
                background-color: #fff;
                border: 1px #f3f2f2 solid;
                border-radius: 20px;
                margin: 0 auto;
                .sub-btn {
                    width: 100%;
                }
                h1 {
                    text-align: center;
                    margin: 20px 0;
                }
            }
        }
    }
    
    // .el-row {
        
    //     .login-box-left {
    //         background-color: red;
    //         padding: 0;
    //         margin: 0;
    //     }
    //     .login-box-right {
    //         padding: 0;
    //         background-color: rgb(0, 51, 255);
    //         // style="display: flex; align-items: center; justify-content: center; width: 80%; float:right;"
    //     }
    // }
    
}
</style>